<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-10-26 16:27:10
 * @LastEditTime: 2023-05-25 10:07:03
 * @FilePath: \vue3\src\views\vue3Study\children3.vue
-->
<template>
  <div style="background: #9400d3">
    <div>我叫:{{ mName }}</div>
    <div>我爹叫:{{ fName }}</div>
  </div>
</template>
<script setup lang="ts">
const props1 = defineProps({
  fName: "",
});

let mName = ref("自来也");
let fName = toRef(props1, "fName");
console.log("children3：", fName.value, useAttrs().fName, useAttrs().fAge);
const myEmits = defineEmits();
let sayBaba = () => {
  console.log(`${fName}是我${mName.value}的爹`);
  myEmits("eat", mName.value);
};
defineExpose({
  sayBaba,
  mName,
});

onMounted(() => {
  console.log("子页面中的生命周期");
});
const sonMounted = () => {
  console.log("子组件的生命周期已经渲染染成");
};
</script>
